<%@page contentType="text/html" pageEncoding="UTF-8" %>
<%
    String HTML_ATTR_NAME="good_id";
%>
<!DOCTYPE html>
<html>
<head>
    <%@ taglib prefix="jstl" uri="http://java.sun.com/jsp/jstl/core"  %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" type="text/css" href="/css/main.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.min.js"></script>
    <style>
        .container input {
            width: 100%;
        }

        .container div {
            margin: 5px 0px;
            outline: none;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#back").click(function(){
                window.history.back(-1);
            });
        });
    </script>
    <script>

        //当点击删除图片的时候调用
        function deleteRow(img) {
            //出对话框，让用户确认是否删除
            var id = $(img).attr("<%=HTML_ATTR_NAME%>");
            $("#dialog").attr("<%=HTML_ATTR_NAME%>", id);
            $("#dialog").modal("show");
        }

        //点了对话框中的确定删除按钮
        function executeDel() {
            var id = $("#dialog").attr("<%=HTML_ATTR_NAME%>");
            //关掉对话框
            $("#dialog").modal("hide");
            //导航到删除页面
            $.getJSON("/api/main/delgoods",
                    {
                        id:id
                    },
                    function (json,status) {
                        var r=json.deleId;
                        var obj=$("#"+r);
                        $("#"+r).remove();
                    }
            );
        }

        //点了对话框中的不删按钮
        function cancelDel() {
            //关掉对话框
            $("#dialog").modal("hide");
        }
    </script>
</head>
<body>
<div>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <label class="navbar-brand">超贝订餐助手</label>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="/Manager/back">退出登录</a></li>
                <li><a href="/Manager/main">订单管理</a></li>
                <li><a href="/Manager/man">员工管理</a></li>
                <li><a href="/Manager/user">用户管理</a></li>
                <li class="active"><a>菜品管理</a></li>
            </ul>
        </div>
    </nav>
</div>
<div class="container">
    <table class="table tab-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>图片</th>
            <th>菜名</th>
            <th>价格</th>
            <th>是否特价</th>
            <th>特价价格</th>
        </tr>
        </thead>
        <tbody>
            <jstl:forEach  items="${goods}" var="good">
                <tr id="${good.id}">
                    <td>${good.id}</td>
                    <td><a href="/Manager/changeimg?modifyGoodid=${good.id}"> <img style="width:121px;height: 100px" src="${good.image}"></a></td>
                    <td>${good.name}</td>
                    <td>${good.price}</td>
                    <jstl:choose>
                        <jstl:when test="${good.isfree==1}">
                            <td>是</td>
                        </jstl:when>
                        <jstl:otherwise>
                            <td>否</td>
                        </jstl:otherwise>
                    </jstl:choose>
                    <td>${good.freeprice}</td>
                    <td><img <%=HTML_ATTR_NAME%>='${good.id}'  onclick='deleteRow(this)' src='../img/del.png'/></td>
                    <td><a href="/Manager/modifyGood?modifyGoodid=${good.id}"><img src='../img/modify.png'/></a></td>
                </tr>
            </jstl:forEach>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col-md-10"> <a href="/Manager/addGood"><p style="color: #337ab7">添加菜品<img src="../img/add.png"></p></a></div>
    <%--下面的语句相当于if和else，英文不好的自己查词典--%>
    <jstl:choose>
        <jstl:when test="${page_pre_index == null}">
            <div class="col-md-1">上一页</div>
        </jstl:when>
        <jstl:otherwise>
            <div class="col-md-1"><a href="/Manager/food?page_start_index=${page_pre_index}">上一页</a></div>
        </jstl:otherwise>
    </jstl:choose>
    <jstl:choose>
        <jstl:when test="${page_next_index >=Lenth}">
            <div class="col-md-1">下一页</div>
        </jstl:when>
        <jstl:otherwise>
            <div class="col-md-1"><a href="/Manager/food?page_start_index=${page_next_index}">下一页</a></div>            </jstl:otherwise>
    </jstl:choose>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="dialog" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    警告
                </h4>
            </div>
            <div class="modal-body">
                你确定要删除这道菜吗?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="cancelDel()">
                    撤销删除
                </button>
                <button type="button" class="btn btn-primary" onclick="executeDel()">
                    立即删除
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>


</html>
